<template>
	<div>
    <div>
      <el-input v-model="likeName" placeholder="请输入内容"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
    </div>
    <el-table :data="userData" style="width: 100%;">
          <el-table-column
            prop="account"
            label="账户"
            >
          </el-table-column>

          <el-table-column
            prop="name"
            label="姓名"
            >
            <template slot-scope="scope">
             <el-tag type="success">{{scope.row.name}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="create_time"
            label="创建时间"
            >
            <template slot-scope="scope">
            {{scope.row.create_time|formatData}}
            </template>
          </el-table-column>

          <el-table-column
            prop="sex"
            label="性别"
            >
            <template slot-scope="scope">
          {{sexName[scope.row.sex]}}
            </template>
          </el-table-column>

          <el-table-column
            prop="address"
            label="地址"
            >
          </el-table-column>
        </el-table>

    <el-pagination
      @size-change="changeMaxSize"
      @current-change="changePageSize"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
  import axios from 'axios'
	export default{
		data(){
			return{
        userData:[],
        currentPage:1,
        pageSizes:[10,100,200,300,400],
        pageSize:10,
        total:400,
        sexName:["保密","男","女"],
        likeName:null
			}
		},
		components:{

		},
		methods:{
      //改变一页容纳的总条数
      changeMaxSize(maxSize){
        //默认接收总条数，但是我需要总条数和当前页码
        let currentPage = this.currentPage
        this.getUserData(currentPage,maxSize)
      },
      //改变页码时
      changePageSize(currentPage){
        //默认接收改变的页码，但是还需要总条数和当前页码
        let maxSize = this.pageSize
        this.getUserData(currentPage,maxSize)
      },
      getUserData(page,maxSize,likeName){
        let params = {
          page,maxSize,likeName
        }
        //发送get请求
        axios.get("http://chenxueli.site:8081/ssm/selectPageUserList",{params}).then((res)=>{
          console.log(res)
          if(res.data.resultCode==0){
            let data = res.data.data
            //将获取到的列表数据赋值到data的userData属性中
            this.userData=data.list
            //当前页面
            this.currentPage=data.pageNum
            //一页显示的总条数
            this.pageSize=data.pageSize
            //总条数
            this.total=data.total
          }else{
            alert(res.data.message);
          }
        })
      },
      search(){
        let likeName = this.likeName
        let maxSize = 10;
        let page = this.page;
        this.getUserData(page, maxSize, likeName)
      }
		},
    mounted() {
      this.getUserData(1,10)
    },
    filters:{
      formatData(date){
        return new Date(date).toLocaleString().replace(/:\d{1,2}$/,' ')
      }
    }
	}
</script>

<style>
  .el-input{
    width: 250px;
  }
</style>
